<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        .div {
            height: 45px;
            background: rgba(149, 149, 153, 0.385);
            /* 第一个参数水平阴影（必须），第二个垂直阴影（必须），
          第三个参数模糊（可选），四阴影颜色（可选），五外部阴影（可选） */
            box-shadow: 0px 1px 2px rgb(108, 109, 110);
        }

        .lis {
            float: left;
            line-height: 45px;
            width: 100px;
            height: 45px;
            text-align: center;
        }

        .lis a {
            color: rgb(121, 117, 117);
            display: block;
        }

        .lis a:hover {
            background-color: silver;
        }

        .ulss {
            display: none;
            background: rgba(149, 149, 153, 0.385);
            box-shadow: 1px 1px 5px rgb(108, 109, 110);
        }

        .ulss li {
            border-top: 1px solid silver;
            height: 45px;
        }

        .lis:hover .ulss {
            display: block;
        }

        .ulss:hover .ulv {
            display: block;
        }

        .ulv {
            display: none;
            background: rgba(149, 149, 153, 0.385);
            position: relative;
            left: 100px;
            top: -45px;
        }
    </style>
</head>

<body>
    <div class="div">
        <ul class="uls">
            <li class="lis">
                <a href="">菜单栏1</a>
                <ul class="ulss">
                    <li>
                        <a href="">二级</a>
                    </li>
                    <li>
                        <a href="">二级</a>
                        <ul class="ulv">
                            <li><a href="">三级</a></li>
                            <li><a href="">三级</a></li>
                            <li><a href="">三级</a></li>
                            <li><a href="">三级</a></li>
                        </ul>
                    </li>
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>

                </ul>
            </li>
            <li class="lis">
                <a href="">菜单栏2</a>
                <ul class="ulss">
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                </ul>
            </li>
            <li class="lis">
                <a href="">菜单栏3</a>
                <ul class="ulss">
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>

                </ul>
            </li>
            <li class="lis">
                <a href="">菜单栏4</a>
                <ul class="ulss">
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>

                </ul>
            </li>
            <li class="lis">
                <a href="">菜单栏5</a>
                <ul class="ulss">
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                    <li><a href="">二级</a></li>
                </ul>
            </li>

        </ul>
    </div>
</body>

</html>